<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p{
            font-size: 22px;
            line-height: 22px;
            font-weight: bold;
        }
        ul{
            display: flex;
            justify-content: space-evenly;
            width: 100%;
            flex-wrap: wrap;
        }
        li{
            width: 300px;
            height: 600px;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: space-evenly;
            border-radius: 5px;
        }
        ul li i{
            color: red;
            font-size: 12px;
        }
        ul li img{
            width: 300px;
            height: 300px;
        }
        ul li p{
            color:#000;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div>
        <p>商品列表</p>
        <input type="button" value="根据价格排序" id="btn1">
        <input type="button" value="根据销量排序" id="btn2">
        <input type="button" value="根据评论排序" id="btn3">
    </div>
    <ul id="content">
        <!-- <li class="box">
            <img src="./img/honor7.jpg" alt="">
            <span>荣耀7</span>
            <p>颜色：黑色</p >
            <p>原价：<s>3999</s></p >
            <i>现价：998.00</i>
            <p>销量：289</p >
            <p>评价：289</p >
        </li> -->
    </ul>
</body>
<script>
    var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: './img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 3243,
            sales: 123
        }];


        function fn(){
            for(var i= 0 ; i< data.length;i++){
            content.innerHTML += '<li class="box">'+
            '<img src="'+data[i].imgurl +'" alt="">'+
            '<span>'+data[i].name +'</span>'+
            '<p>颜色:'+data[i].color +'</p>'+
            '<p>原价：<s>'+data[i].price +'</s></p>'+
            '<i>现价：'+data[i].sale +'</i>'+
            '<p>销量：'+data[i].sales+'</p>'+
            '<p>评价：'+data[i].evaluate+'</p>'+
            '</li>'
            }
        }
        onload = function(){
            fn();
            btn1.onclick = function(){
                content.innerHTML = "";
                data.sort(function(a,b){
                    return b.sale - a.sale
                })
                fn();
            }
            btn2.onclick = function(){
                content.innerHTML = "";
                data.sort(function(a,b){
                    return b.sales - a.sales
                })
                fn();
            }
            btn3.onclick = function(){
                content.innerHTML = "";
                data.sort(function(a,b){
                    return b.evaluate - a.evaluate
                })
                fn();
            }
        }

</script>
</html>